<template>
    <div class="main-scrollbar">
        <div class="top_box">
            <el-button size="small" type="primary" @click="edit">修改信息</el-button>
        </div>
        <div class="main-header">
            <el-descriptions style="width:100%" :column="1" size="medium" border :labelStyle="{ 'white-space': 'nowrap', 'width': '100px' }">
                <el-descriptions-item label="头像">
                    <el-image style="width:50px;height:50px;" :src="archiveData.avatar" :preview-src-list="[archiveData?.avatar]"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="用户名">{{archiveData.username}}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{archiveData.nickname}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ archiveData.email}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{archiveData.mobile}}</el-descriptions-item>
                <el-descriptions-item label="最后登录时间">{{archiveData.lastlogintime}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <el-dialog title="修改信息" :visible.sync="dialogVisible" @close="close">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="6em">
                <el-row type="flex" :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="用户头像" prop="avatar">
                            <el-upload-image v-model="formData.avatar"></el-upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username" placeholder="请输入3-15位的字母或数字的组合" maxlength="15" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" placeholder="编辑时非必填" maxlength="32" type="password" show-password clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="formData.nickname" placeholder="示例: 管理员" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email" placeholder="示例: 12346@email.com" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="formData.mobile" placeholder="示例: 13888888888" maxlength="11" type="text" clearable></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" icon="el-icon-check" @click="submit">完成</el-button>
                    <el-button type="primary" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";
import { post } from "@/assets/js/http.js";

export default {
    name: "view-archive",
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            archiveData: {},
            dialogVisible: false,
            formData: {
                avatar: [],
                username: "",
                password: "",
                nickname: "",
                email: "",
                mobile: "",
            },
            formRules: {
                username: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[A-Za-z0-9]{3,15}$/,
                        message: "格式错误"
                    }
                ],
                password: [
                    {
                        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>/?]).{10,32}$/,
                        message: "格式错误"
                    }
                ],
                nickname: {
                    required: true,
                    message: "此项为必填项"
                },

                email: {
                    pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                    message: "邮箱格式错误",
                    trigger: "blur"
                },
                mobile: {
                    pattern: /^0?1[3|4|5|6|7|8][0-9]\d{8}$/,
                    message: "手机号格式错误",
                    trigger: "blur"
                },

            }
        };
    },
    mounted() {
        this.getArchiveData();
    },
    methods: {
        async getArchiveData() {
            const result = await get({
                url: "/admin/routine.AdminInfo/index",
                loading: true,
                params: {}
            });
            this.archiveData = result.info;
        },
        edit() {
            const data = JSON.parse(JSON.stringify(this.archiveData))
            data.avatar = data.avatar ? [{ name: data.avatar, url: data.avatar }] : []
            this.formData = data
            this.dialogVisible = true
        },
        submit() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if (formData.avatar.length > 0) {
                        if (formData.avatar[0].response) {
                            formData.avatar = "http://nhcj.app65.cn/" + formData.avatar[0].response.data.file.url;
                        } else {
                            formData.avatar = formData.avatar[0].url;
                        }
                    } else {
                        formData.avatar = "";
                    }
                    post({
                        url: "/admin/auth.admin/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    }).then(res => {
                        console.log(res);
                    })
                }
            });
        },
        close() {
            this.formData = Object.assign({}, this.$options.data().formData)
        }
    }
};
</script>
<style scoped>
::v-deep .el-descriptions__body {
    color: #303133;
}
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: 1px solid #303133;
    color: #303133;
}
</style>